<template>
	<view class="index_content">
		<view class="banner">
			<Banner></Banner>
		</view>
		<view class="uni-flex uni-row">
			<view class="flex-item uni-bg-red text" @click="navigateTo('../question/question')">题库练习</view>
			<view class="flex-item uni-bg-green text">模拟考试</view>
		</view>
		<view class="u-demo-block">
			<view>
				<u-grid
					:border="false"
					col="3"
				>
					<u-grid-item
						v-for="(listItem,listIndex) in list"
						:key="listIndex"
						customStyle="padding-top: 10px; padding-bottom: 10px"
					>
						<u--image :showLoading="true" :src="listItem.src" width="80rpx" height="80rpx" @click="click">
						</u--image>
						<text class="grid-text">{{listItem.name}}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
	</view>
</template>

<script>
	import Banner from '@/pages/components/Banner.vue'
	export default {
		components: {
			Banner
		},
		data() {
			return {
				list: [
					{id:1,icon:"integral",name:"考点大全",src:"/static/index/tongyongsheding.png"},
					{id:2,icon:"kefu-ermai",name:"专项刷题",src:"/static/index/tongyongsheding.png"},
					{id:3,icon:"coupon",name:"题型刷题",src:"/static/index/tongyongsheding.png"},
					{id:4,icon:"gift",name:"乱序刷题",src:"/static/index/tongyongsheding.png"},
					{id:5,icon:"scan",name:"我的收藏",src:"/static/index/tongyongsheding.png"},
					{id:6,icon:"pause-circle",name:"我的错题",src:"/static/index/tongyongsheding.png"},
					{id:7,icon:"wifi",name:"未做习题",src:"/static/index/tongyongsheding.png"},
					{id:8,icon:"email",name:"自我测评",src:"/static/index/tongyongsheding.png"},
					],
			}
		},
		methods: {
			navigateTo(url) {
				uni.navigateTo({
				    url:url
				});
			}
		}
	}
</script>

<style>
	.uni-flex {
		display: flex;
		flex-direction:row;
	}
	.uni-row{
		flex-direction:row;
	}
	.flex-item {
		width: 33.3%;
		height: 200rpx;
		text-align: center;
		line-height: 200rpx;
	}
	.uni-bg-red{
		background-color: cornflowerblue;
		margin: 20rpx 15rpx 20rpx 30rpx;
	}
	.uni-bg-green{
		background: #cddc39;
		margin: 20rpx 30rpx 15rpx 20rpx;
	}
	.text {
		-webkit-flex: 1;flex: 1;
	    padding: 0 0;
		border-radius: 15rpx;
	    height: 160rpx;
	    line-height: 160rpx;
	    text-align: center;
	    color: #ffffff;
	    font-size: 26rpx;
	}
	.menu{
		background: #e8e4e4;
		border: 1rpx solid #ffffff;
		margin: 0rpx 10rpx;
		border-radius: 10rpx;
	}
	.box{
		  width: 33.33%;
		  font-size: 26rpx;
		  font-size: 24rpx;
		  color: darkolivegreen;
		}
	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
</style>
